<template>

  <div class="personnel-main">

        <div class="personnel-content">
          <h1 style="font-size: 20px;color: #999;margin-bottom: 12px">数据报表</h1>
          <div class="d-flex align-items-center mb-15">
                <p class="w-120 text-left font-16">日期时间:</p>
                <el-input
                   type="number"
                    style="width: 350px;"
                    placeholder="请输入前多少天的数据"
                    v-model="form.date"
                    clearable>
                </el-input>
            </div>          
           <div class="d-flex align-items-center mb-15">
               <p class="w-120 text-left font-16">报表类型:</p>
               <el-select style="width:350px;" v-model="form.status" placeholder="请选择">
                   <el-option
                       v-for="item in statusOptions"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
                   </el-option>
               </el-select>               
           </div>                      
            <div>
                <el-button type="primary" @click="confirm">确定</el-button>
            </div>
        </div>

  </div>

</template>

<script>
import { get, post } from "../utils/request";
import {CodeToText, provinceAndCityData} from 'element-china-area-data'


export default {
    name: "AssignPersonnel",
    data(){
        return {
            form: {
                date:'',
                name: '',
                userName: '',
                idCardNum: '',
                phone: '',
                email: '',
                situation: '',
                startTime: '',
                endTime: '',
                status: '',
                hotel: '',
                roomType: '',
                province: '',
                city: '',
            },
            situationOptions: [{
                value: 0,
                label: '密接'
            }, {
                value: 1,
                label: '应隔尽隔人员'
            }, {
                value: 2,
                label: '入境人员'
            }, {
                value: 3,
                label: '中高风险地区人员'
            }],
            statusOptions: [{
                value: 1,
                label: '每日对账单'
            }, {
                value: 2,
                label: '销售报表'
            },{
                value: 3,
                label: '会员消费报表'
            }, {
                value: 4,
                label: '员工报表'
            }],
            hotelOptions: [],
            roomTypeOptions: [],
            addressData: provinceAndCityData,
            area: [],
        }
    },
    watch: {
        "form.hotel"(val, oldVal){
            this.getIsolationRoomType()
        }
    },
    mounted() {
        // this.getIsolationHotelList()
    },
    methods: {
        getAddress(value) { //value是长度为2的装有被选择省、市代码的数组;CodeToText是个对象，键名为代码，键值为省和城市
            this.area = [];
            for (let i = 0; i < value.length; i++) {
                let code = value[i];
                this.area.push(CodeToText[code]);
            }
            this.form.province = this.area[0]
            this.form.city = this.area[1]
            console.log(this.area); //["河北省","唐山市"]
        },
        // 获取隔离酒店
        getIsolationHotelList() {
            const data = {
                page: {
                    page: 1,
                    size: 99999
                },
                allowIsolation: 1                
            }
            post('/api/hotel/page', data)
                .then( res => {
                    console.log(res);
                    this.hotelOptions = res.data.data.records
                })
                .catch( err => {
                    console.error(err);
                })
        },

        // 获取隔离酒店对应的房间
        getIsolationRoomType() {
            const data = {
                isIsolation: 1
            }
            get(`api/roomType/currentRoomTypeList/${this.form.hotel}`, data)
                .then( res => {
                    console.log(res);
                    this.roomTypeOptions = res.data.data
                })
                .catch( err => {
                    console.error(err);
                })
        },

        confirm() {
            const data = {
                date: this.form.date,
                type: this.form.status,
            }
            post('/api/data/look',data)
                .then( res => {
                    console.log(res);
                    if (res.data.code == 200) {
                        this.$message({
                            message: '成功',
                            type: 'success',
                            duration: 2000
                        });                        
                    }
                })
                .catch( err => {
                    console.error(err);
                })
        }

    }

}
</script>

<style scoped>
.personnel-main {
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  width: 100%;
  min-width: 1000px;
  height: 100%;
  background: #FFFFFF;
  box-shadow: 0px 5px 30px 0px rgba(22, 115, 255, 0.1);    
}
.personnel-content {
    padding: 30px 25px;
  border: 1px solid #d5d5d5;
  width: 500px;
  margin: 0 auto;
  margin-top: 30px;
  border-radius: 6px;
}
</style>